<%@page import="com.mysql.fabric.xmlrpc.base.Data"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglibs.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${ctx}/static/lib/layui/css/layui.css">
<style type="text/css">
.main_div{
	margin : 15px;
}
</style>
</head>
<body>
	<div class="main_div">
		<form id="from_add" class="layui-form layui-form-pane" action="">
		  <input type="hidden" id="id" name="id">
		  <div class="layui-form-item">
		    <label class="layui-form-label">用户名</label>
		    <div class="layui-input-inline">
		      <input type="text" id="name" name="name" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">密码</label>
		    <div class="layui-input-inline">
		      <input type="text" id="password" name="password" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">真实姓名</label>
		    <div class="layui-input-inline">
		      <input type="text" id="trueName" name="trueName" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">邮箱</label>
		    <div class="layui-input-inline">
		      <input type="text" id="email" name="email" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">电话</label>
		    <div class="layui-input-inline">
		      <input type="text" id="phone" name="phone" lay-verify="required" placeholder="请输入" autocomplete="off" class="layui-input">
		    </div>
		  </div>
		  
		  <div class="layui-form-item">
			<label class="layui-form-label">角色</label>
			<div class="layui-input-block" id="roles" name="roles">
	      </div>
		  </div>       
		  
		</form>
		   <button class="layui-btn"  onclick="submitForm()">修改</button> 
	</div>
	
	
	<script src="${ctx}/static/back/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctx}/static/common/mylayer.js"></script>
	<script src="${ctx}/static/common/util.js"></script>
	<script src="${ctx}/static/lib/layui/layui.js"></script>
	<script type="text/javascript">
	 	/* layui.use('layer', function(){
		 var layer = layui.layer;
	 	}); */
	  layui.config({
	    base : '${ctx}/static/lib/'
	  }).extend({
	    selectM: './layui_extends/selectM',
	  }).use(['layer','form','selectM','upload'],function(){
	    $ = layui.jquery;	
	    var form = layui.form;
	    var upload = layui.upload;
	    var selectM = layui.selectM;
	
		$.ajax({
			url : "${ctx}/user/selectUserAndRole.action",
			type : "POSt",
			data : {"userId" : "${param.userId}"},
			dataType : "json",
			success : function(resp){
				if(resp.code == util.SUCCESS){
					
					var user = resp.data["user"];
					var allRoles = resp.data["roles"];
					var selectIds = resp.data["selectIds"];
					console.log(selectIds);
					
					$("#id").val(user.id);
					$("#name").val(user.name);
					$("#password").val(user.password);
					$("#trueName").val(user.trueName);	
					$("#email").val(user.email);
					$("#phone").val(user.phone);
					
					mylayer.success(resp.msg);
					 //多选标签-所有配置
				    var tagIns2 = selectM({
				      //元素容器【必填】
				      elem: '#roles'
				      
				      //候选数据【必填】
				      ,data: allRoles
				      
				      //默认值
				      ,selected: selectIds			
				      
				      //最多选中个数，默认5
						,max : 100
				    });
				} else {
					mylayer.errorMsg(resp.msg);
				}
			}
		});
	  });
	 	
 	//ajax提交表单
	function submitForm(){
		$.ajax({
			url : "${ctx}/user/update.action",
			data : $('#from_add').serialize(),
			type : "post",
			dataType : "json",	
			success : function(resp){
				if(resp.code == util.SUCCESS){
					mylayer.confirm("修改成功，是否跳转到用户管理界面?","${ctx}/user/getUserPage.action");
				} else {
					mylayer.errorMsg(resp.msg);
				}
			}
			
		});
	}   	
	</script>
	
</body>
</html>